<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <title>护照验证</title>
    <link rel="stylesheet" href="../../css/reset.css" />
    <style>
        body {
            width: 100%;
            background-color: #fff;
            font-size: 0.28rem;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: Helvetica;
            color: #333333;
            height: auto;
        }

        button {
            outline: none;
            border: none;
            background: #fff;
            color: #F2B40A;
        }

        .checkmessage {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            padding-left: 0.24rem;
            box-sizing: border-box;
        }

        .downChoose {
            width: 0.24rem;
            height: 0.13rem;
            position: absolute;
            top: 0.45rem;
            right: 0.2rem;
        }

        .checkmessage div {
            width: 100%;
            border-bottom: 1px solid #e5e5e5;
            box-sizing: border-box;
            padding-bottom: 0.1rem;
        }

        .checkmessage div:first-of-type {
            border-top: 1px solid #e5e5e5;
        }

        .checkmessage input {
            outline: none;
            border: none;
            display: inline-block;
            width: 100%;
            height: 0.92rem;
            box-sizing: border-box;
            font-size: 0.26rem;
        }

        .nextbutton {
            width: 6.88rem;
            height: 0.9rem;
            text-align: center;
            line-height: 0.9rem;
            background-color: #ffd203;
            outline: none;
            border: none;
            border-radius: 0.1rem;
            margin-top: 0.8rem;
            margin-left: calc((100% - 6.88rem) / 2);
            font-size: 0.28rem;
        }

        #copyText {
            width: 1.4rem;
            height: 0.4rem;
            background: rgba(255, 210, 3, 1);
            border-radius: 0.04rem;
            font-size: 0.18rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);
            line-height: 0.4rem;
            padding: 0;
        }
    </style>
</head>

<body>
    <div class="chooseItem"
        style="padding-right: 0; width: 100%;height: 1.2rem;padding: 0 0.5rem 0 0.24rem;box-sizing: border-box;display: flex;display: -webkit-flex;justify-content: space-between;align-items: center;border-top: 0.2rem solid #f7f7f7;position: relative;">
        <select name="outland" id="chooseOutLand"
            style="border: none;background: transparent;display: flex;outline: none;align-items: center;-webkit-appearance: none;vertical-align: top;height: 0.36rem;min-width: 100%;padding-left: 0;appearance: none;-moz-appearance: none;-webkit-appearance: none;background: url(../../image/xialax.png) no-repeat scroll right center;padding-right: 0.28rem;background-size: 0.2rem;background-position-x: 96%;font-size: 0.28rem;">
            <option value="">选择您的证件类型</option>
            <option value="passport">护照</option>
            <option value="otherport">台胞证</option>
        </select>
    </div>
    <div class="checkmessage">
        <div>
            <input type="text" name="" id="engName" placeholder="请输入您的英文全名" />
        </div>
        <div
            style="display: flex;display:-webkit-flex;justify-content: space-between;padding-right: 0.24rem;box-sizing: border-box;align-items: center;">
            <input type="text" name="" id="userName" placeholder="请输入您的提现银行卡开户名" style="flex: 1;" /> 
            <!-- <button id="copyText" data-copyText="">复用英文全名</button> -->
        </div>
        <div>
            <input type="text" name="" id="userNumber" placeholder="请输入证件号码，认证后不能修改" maxlength="30" />
        </div>
    </div>
    <div
        style="width: 100%;padding-left: 0.24rem;box-sizing: border-box;font-size:0.24rem;color: #f66666;padding-top: 0.22rem;">
        温馨提示：<br>
        1.请输入您的提现银行卡开户名,必须填写本人姓名<br>
        2.所填信息必须和证件上保持一致
    </div>
    <button class="nextbutton" style="color:#262626;">下一步</button>
</body>

</html>

<script src="../../script/autosize.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/app.js"></script>
<script>
    apiready = function () {
        var app = new APP();
        var goMyPage;
        if (api.pageParam.goMyPage != undefined && api.pageParam.goMyPage) {
            goMyPage = api.pageParam.goMyPage;
        }
        $(".nextbutton").on("click", function () {
            if (!$("#engName").val()) {
                app.toast("英文姓名不能为空");
                return;
            }
            if (!$("#userName").val()) {
                app.toast("母语姓名不能为空");
                return;
            }
            if (!$("#userNumber").val()) {
                app.toast("证件号码不能为空");
                return;
            }
            var chooseCerfertion = $("#chooseOutLand option:selected").val();
            if (!chooseCerfertion) {
                app.toast("请选择你的证件类型");
                return
            }
            var pageValue = {
                name: "uploadpicture",
                subpage: "my/uploadpicture",
                title: "上传证件",
                param: {
                    pageName: "uploadpicture",
                    userName: $("#userName").val().trim(),
                    userCardNumber: $("#userNumber").val().trim(),
                    goMyPage: goMyPage,
                    type: chooseCerfertion,
                    engName: $("#engName").val().trim()
                }
            }
            app.setNavBarAttr(pageValue);
        });
        $("#copyText").click(function () {
            if (!$("#engName").val()) {
                app.toast("请输入您的姓名英文全名");
                return;
            }
            $("#userName").val($("#engName").val().trim());
            // if (app.clipboard) {
            //     var text = $("#copyText").attr("data-copyText");
            //     if (text) {
            //         app.clipboard.set({
            //             value: text
            //         }, function (ret, err) {
            //             app.log("copy", ret);
            //             if (ret.status) {
            //                 app.toast("复制成功");
            //             } else {
            //                 app.toast("复制失败");
            //             }
            //         });
            //     } else {
            //         app.toast("复制不能为空");
            //     }
            // }
        })
        app.listen("auth_commit_success", function () {
            app.closeW();
        });
        app.headerMap();
    };
</script>